<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
// 水球图
import 'echarts-liquidfill'
import { ElMessage } from 'element-plus';
let charts = ref();
let chart2 = ref();
const initChart = (charts: any, option: any) => {
    // 获取echarts实例
    let mycharts = echarts.init(charts);
    // 指定图表配置信息和数据
    mycharts.setOption(option);
    window.addEventListener('resize', () => {
        mycharts.resize();
    })
}
const optionWater = {
    series: {
        type: "liquidFill",
        // 波动的数据
        data: [0.5, 0.4, 0.2],
        radius: '90%',
    },
}
const optionZ = {
    title: {
        text: '知识点掌握情况',
        left: '40%',
        textStyle: {
            color: 'yellowgreen',
            fontSize: 20
        }
    },
    dataset: {
        source: [
            ['degree', 'people', 'point'],
            [77, 56, '进程管理'],
            [68, 34, '内存管理'],
            [52, 27, '网络协议'],
            [45, 24, '路由算法'],
            [10, 10, '排序算法'],
        ]
    },
    // grid: { containLabel: true },
    xAxis: {
        name: '学习人数', axisLabel: {
            // 设置字体样式
            axisLabel: {
                fontSize: 14, // 设置字体大小
                fontWeight: 'bold' // 设置字体加粗
            }
        }
    },
    yAxis: {
        type: 'category',
        axisLabel: {
            fontSize: 12, // 设置字体大小
            fontWeight: 'bold' // 设置字体加粗
        }
    },//图表均分
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['掌握程度高', '掌握程度低'],
        // Map the score column to color
        dimension: 0,
        inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
        }
    },
    series: [
        {
            type: 'bar',
            encode: {
                x: 'people',
                y: 'point'
            }
        }
    ]
};
onMounted(() => {
    initChart(charts.value, optionWater);
    initChart(chart2.value, optionZ);
})
</script>

<template>
    <div class="main">
        <el-row>
            <el-col :span="12" class="left-box">
                <h3>课程总体学习进度</h3>
                <!-- 左边大盒子 -->
                <div class="up-box">

                    <el-dropdown :hide-on-click="false">
                        <span>
                            <p style="font-weight: bold;font-size: 17px;">离散数学<el-icon>
                                    <arrow-down /></el-icon></p>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="ElMessage('??');">离散数学</el-dropdown-item>
                                <el-dropdown-item @click="ElMessage('ok');">操纵系统</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <div class="charts" ref="charts"></div>
                </div>

                <div class="down-box"></div>
            </el-col>
            <el-col :span="12">
                <!-- 右边大盒子 -->
                <div class="right-charts" ref="chart2"></div>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.main {
    /* 高度减头部高度 */
    height: calc(100vh-60px);
    padding: 50px 20px;
}

.left-box {
    display: flex;
    height: 650px;
    flex-direction: column;
    text-align: center;

    .up-box {
        flex: 1;
        /* background-color: #ffe2e2; */
        display: flex;
        align-items: center;
        justify-content: center;

        .charts {
            width: 250px;
            height: 200px;
            margin-left: 20px;
        }
    }

    .down-box {
        flex: 1;
        /* background-color: #c9c9c9; */
    }

}

.right-charts {
    margin-top: 20px;
    margin-left: 20px;
    width: 90%;
    height: 60%;
    margin-left: 20px;
}

/* 右边父盒子 */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    /* height: 100vh; */
    background-color: cornsilk;
}
</style>
